<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Access-Control-Allow-Origin" content="oapi.dingtalk.com">
  <title>钉钉机器人控制器</title>
  <script src="js/jquery-2.2.4.min.js"></script>
  <style>
    #app {
      width: 500px;
      height: 600px;
      text-align: center;
      margin: 0 auto;
    }

    body {
      text-align: center;
    }

    #who {
      width: 400px;
      height: 30px;
    }

    #token {
      width: 400px;
      height: 30px;
    }

    #markdown {
      width: 500px;
      height: 250px;
      display: none;
      background-color: blanchedalmond;
    }

    #link {
      width: 500px;
      height: 250px;
      display: none;
      background-color: blanchedalmond;
    }

    #text {
      width: 500px;
      height: 250px;
      display: block;
      background-color: blanchedalmond;
    }
  </style>
</head>

<body>
<a href="https://developers.dingtalk.com/document/robots/custom-robot-access">
  <h1>钉钉机器人操作器</h1>
</a>

<div id="app">
  <h3>token</h3>
  <input v-model="token" id="token">
  <h3>title(界面显示内容)</h3>
  <input v-model="whois" id="who" />
  <div id="xuan">
    <input  name="type" type="radio" value="0" onclick="change()" />link类型类型
    <input  name="type" type="radio" value="1" onclick="change()" />markdown类型
    <input  name="type" type="radio" value="2" onclick="change()" checked="true" />text类型
  </div>
  <div id="text">
    识别码:<input type="text" v-model="text.shibie">
    @的人<input type="text" v-model="text.name">
    手机号:<input type="text" v-model="text.phone"> 是否群发: 是
    <input type="radio"  checked="true" value="0" name="qun" onclick="isqun()"> 否
    <input type="radio"   value="1" name="qun" onclick="isqun()">

    <textarea name="text11"  cols="30" rows="10" v-model='intext'></textarea>
  </div>

  <div id="markdown">
    识别码:<input type="text"  v-model="markdown.phone">
    <textarea name="text11"  cols="30" rows="10" v-model='intext'></textarea>
  </div>
  <div id="link">
    链接地址:<input type="text" id="url" v-model="link.murl"> 图片地址:
    <input type="text" id="picurl" v-model="link.picurl"><br> 识别码:
    <input type="text" id="title" v-model="link.shibie"> text:
    <br>
    <textarea name="text11"  cols="30" rows="10" v-model='intext'></textarea>
  </div>
  <br>
  <button v-on:click='go'>发送</button>
</div>
<script src="js/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      markdown: {
        phone: ""
      },
      link:{
        murl:"",
        picurl:"",
        shibie:""
      },text:{
        phone: "",
        name:"",
        shibie: ""
      },
      intext: "",
      token: "",
      whois: ""
    },
    methods: {
      go: function() {
        var radio = document.getElementsByName("type");
        if (radio[0].checked) {
          $.ajax({
            type: 'GET',
            url: "/travel/linkServlet?message="+this.intext+this.link.shibie+"&token="+this.token+"&whois="+this.whois+"&murl="+this.link.murl+"&picurl="+this.link.picurl,
            success: function(data) {
              alert("发送成功");
            },
            error: function(d, msg) {
              alert("error");
            }
          })
        } else if (radio[1].checked) {
          $.ajax({
            type: 'GET',
            url: "/travel/markdown?message=" + this.intext + "&token=" + this.token + "&whois=" + this.whois + "&phone=" + this.markdown.phone,
            success: function(data) {
              alert("发送成功");
            },
            error: function(d, msg) {
              alert("error");
            }
          })
        } else {
          console.log(qqq);
          $.ajax({
            type:'GET',
            url:"/travel/textServlet?message="+ this.text.shibie+this.intext + "&token=" + this.token+"&phone=" + this.text.phone+"&name="+this.text.name+"&qun="+qqq,
            success: function(data) {
              alert("发送成功");
            },
            error: function(d, msg) {
              alert("error");
            }
          })

        }

      }
    }
  })
</script>
<script>
  var qqq = true;

  function change() {
    var radio = document.getElementsByName("type");
    if (radio[0].checked) {
      $("#text").css("display", "none");
      $("#markdown").css("display", "none");
      $("#link").css("display", "block");
    } else if (radio[1].checked) {
      $("#text").css("display", "none");
      $("#link").css("display", "none");
      $("#markdown").css("display", "block");
    } else {
      $("#text").css("display", "block");
      $("#link").css("display", "none");
      $("#markdown").css("display", "none");
    }
  }

  function isqun() {
    var qunms = document.getElementsByName("qun");
    if (qunms[0].checked) {
      qqq = true;
    } else {
      qqq = false;
    }

  }
</script>
</body>

</html>